<script setup>

</script>

<template>
  <el-card>
    <!-- 查询条件开始 -->
    <el-form ref="queryForm" :model="queryParams" :inline="true" label-width="88px">
      <el-form-item label="公告标题" prop="noticeTitle">
        <el-input
            v-model="queryParams.data.noticeTitle"
            placeholder="请输入通知公告标题"
            clearable
            size="small"
            style="width:240px"
        />
      </el-form-item>
      <el-form-item label="发布者" prop="createBy">
        <el-input
            v-model="queryParams.data.createBy"
            placeholder="请输入发布者"
            clearable
            size="small"
            style="width:240px"
        />
      </el-form-item>
      <el-form-item label="类型" prop="noticeType">
        <el-select
            v-model="queryParams.data.noticeType"
            placeholder="类型"
            clearable
            size="small"
            style="width:240px"
        >
          <el-option
              v-for="dict in noticeTypeOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-select
            v-model="queryParams.data.status"
            placeholder="可用状态"
            clearable
            size="small"
            style="width:240px"
        >
          <el-option
              v-for="dict in statusOptions"
              :key="dict.dictValue"
              :label="dict.dictLabel"
              :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button type="primary" icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 查询条件结束 -->

    <!-- 表格工具按钮开始 -->
    <el-row :gutter="10" style="margin-bottom: 8px;">
      <el-col :span="1.5">
        <el-button type="success" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete">
          批量删除
        </el-button>
      </el-col>
    </el-row>
    <!-- 表格工具按钮结束 -->

    <!-- 数据表格开始 -->
    <el-table border :data="noticeTableList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center"/>
      <el-table-column label="公告ID" align="center" prop="noticeId"/>
      <el-table-column label="公告标题" align="center" prop="noticeTitle"/>
      <el-table-column label="公告类型" prop="noticeTypeName" align="center"/>
      <el-table-column label="状态" prop="statusName" align="center"/>
      <el-table-column label="发布者" align="center" prop="createBy"/>
      <el-table-column label="创建时间" align="center" prop="createTime" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button type="text" icon="el-icon-edit" size="mini" @click="handleUpdate(scope.row)">修改
          </el-button>
          <el-button type="text" icon="el-icon-delete" size="mini" @click="handleDelete(scope.row)" :disabled="single">删除
          </el-button>
          <el-button type="text" icon="el-icon-view" size="mini" @click="handleView(scope.row)">查看
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 数据表格结束 -->
    <!-- 分页控件开始 -->
    <el-pagination
        v-show="total>0"
        :current-page="queryParams.pageNo"
        :page-sizes="[5, 10, 20, 30]"
        :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 添加修改弹出层开始 -->
    <el-dialog
        :title="title"
        :visible.sync="open"
        width="800px"
        center
        append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="标题" prop="noticeTitle">
              <el-input v-model="form.noticeTitle" placeholder="请输入通知公告标题" clearable
                        size="small"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              <el-radio-group v-model="form.status">
                <el-radio
                    v-for="dict in statusOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                    :value="dict.dictValue"
                >{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="类型" prop="noticeType">
              <el-radio-group v-model="form.noticeType">
                <el-radio
                    v-for="dict in noticeTypeOptions"
                    :key="dict.dictValue"
                    :label="dict.dictValue"
                    :value="dict.dictValue"
                >{{ dict.dictLabel }}
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="公告内容">
              <vue-editor v-model="form.noticeContent" :options="{hideModeSwitch:true,previewStyle:'tab'}"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" placeholder="请输入备注" clearable size="small"/>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
    <!-- 添加修改弹出层结束 -->

    <el-dialog
        :title="title"
        :visible.sync="noticeContentOpen"
        width="800px"
        center
        append-to-body
    >
      <vue-editor v-model="noticeContent" :editor-toolbar="['bold', 'italic', 'underline', 'strike', '|', 'link', 'image']" />
    </el-dialog>
    <!-- 公告内容弹出层结束 -->
  </el-card>
</template>

<script>
import {VueEditor} from "vue2-editor";

export default {
  //以组件方式使用VueEditor
  components:{
    VueEditor
  },
  data(){
    return{
      // 查询条件
      queryParams:{
        pageNo:1,
        pageSize:5,
        /*noticeTitle:"",
        createBy:"",
        noticeType:"",
        status:"",*/
        data:{}
      },
      //查询的公告类型字典
      noticeTypeOptions:[],
      //查询的状态字典
      statusOptions:[],
      //非单个禁用
      single:false,
      //非多个禁用
      multiple:true,
      //批量删除id集合
      noticeIds:[],
      //表格数据
      noticeTableList:[],
      //总条数
      total:0,
      title:"",
      //公告内容弹出层控制
      noticeContentOpen:false,
      //公告内容
      noticeContent:"",
      //添加修改表单数据
      form:{
        noticeTitle:"",
        noticeType:"",
        status:"",
        noticeContent:"",
        remark:""
      },
      //添加修改弹出控制
      open:false,
      //添加修改表单验证规则
      rules:{
        noticeTitle:[
          {required:true,message:"请输入公告标题",trigger:"blur"}
        ],
        noticeType:[
          {required:true,message:"请选择公告类型",trigger:"blur"}
        ],
        status:[
          {required:true,message:"请选择状态",trigger:"blur"}
        ],
        noticeContent:[
          {required:true,message:"请输入公告内容",trigger:"blur"}
       ]
      }
    }
  },
  created(){
    this.formdata()
    this.getNoticeType()
  },
  methods:{
    //获取表单数据
    formdata(){
      this.$http.post("/notice/queryByPage",this.queryParams).then(res=>{
        if(res.data.code === 200){
          this.noticeTableList = res.data.data.list
          this.total = res.data.data.total
        }else{
          this.$message.error("获取数据失败")
        }
      })
    },
    //获取字典
    getNoticeType(){
      //获取公告状态的字典
      this.$http.get("/notice/getStatus").then(res=>{
        // console.log(res.data)
        if(res.data.code === 200){
          this.statusOptions = res.data.data
        }else{
          this.$message.error("获取数据失败")
        }
      })
      //获取公告类型的字典
      this.$http.get("/notice/getType").then(res=>{
        // console.log(res.data)
        if(res.data.code === 200){
          this.noticeTypeOptions = res.data.data
        }else{
          this.$message.error("获取数据失败")
        }
      })
    },
    //分页大小改变
    handleSizeChange(val){
      this.queryParams.pageSize = val
      this.formdata()
    },
    //分页页码改变
    handleCurrentChange(val){
      this.queryParams.pageNo = val
      this.formdata()
    },
    //搜索按钮
    handleQuery(){
      this.formdata()
    },
    //重置按钮
    resetQuery(){
      this.queryParams = {
        pageNo:1,
        pageSize:5,
        data:{},
        /*noticeTitle:"",
        createBy:"",
        noticeType:"",
        status:""*/
      }
      this.formdata()
      // location.reload()
    },
    //添加方法
    handleAdd(){
      this.open = true
      this.$refs.form.resetFields()
      this.title = "添加公告"
      this.form = {
        noticeTitle:"",
        noticeType:"",
        status:"",
        noticeContent:"",
        remark:""
      }
    },
    //修改方法
    handleUpdate(row){
      this.open = true
      this.$refs.form.resetFields()
      this.title = "修改公告"
      this.form = {
        noticeId:row.noticeId,
        noticeTitle:row.noticeTitle,
        noticeType:row.noticeType,
        status:row.status,
        noticeContent:row.noticeContent,
        remark:row.remark
      }
    },
    //添加修改提交方法
    handleSubmit(){
      this.$refs["form"].validate(valid=>{
        if(valid){
          this.$http.post("/notice/insertAndUpdate",this.form).then(res=>{
            if(res.data.code === 200){
              this.$message.success("操作成功")
              this.open = false
              this.formdata()
            }else{
              this.$message.error("操作失败")
            }
          })
        }
      })
    },
    //添加修改取消方法
    cancel(){
      this.open = false
      this.form = {
        noticeTitle: "",
        noticeType: "",
        status: "",
        noticeContent: "",
        remark: ""
      }
  },
    //删除方法
    handleDelete(row) {
      let ids = row.noticeId || this.noticeIds
      this.$confirm("确认删除选中的项吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.$http.delete("/notice/deleteByIds/" + ids).then(resp => {
          console.log(resp.data)
          if (resp.data.code === 200) {
            this.$message.success("删除成功");
            this.formdata()
          }
        }).catch(error =>{
          this.$message.warning("删除失败");
        })
      }).catch(error => {
        this.$message.warning("取消删除");
      })
    },
    //查看方法
    handleView(row){
      this.noticeContent = row.noticeContent
      this.noticeContentOpen = true
    },
    //选择器
    handleSelectionChange(selection){
      this.noticeIds = selection.map(item=>item.noticeId)
      this.single = selection.length>1
      this.multiple = !selection.length
    },
    //表单的公告类型字典方法
    noticeTypeFormatter(row){
      let dictLabel = "未知"
      this.noticeTypeOptions.filter(item=>{
        if(item.dictValue === row.noticeType){
          dictLabel = item.dictLabel
        }
      })
      return dictLabel
    },
    //表单的状态字典方法
    statusFormatter(row){
      let dictLabel = "未知"
      this.statusOptions.filter(item=>{
        if(item.dictValue === row.status){
          dictLabel = item.dictLabel
        }
      })
      return dictLabel
    }
  }
}
</script>
<style scoped>

</style>